<template>
	<div>
		<div class="list">
			<Card v-for="v in list" :key="v.id" :item="v" 
				@click="toPosts(v.id)"></Card>
		</div>
	</div>
</template>


<script>
import { mapState, mapActions } from 'vuex'
import Card from '@/components/card'
export default {
	components: {
		Card
	},
	computed: {
		...mapState(['list'])
	},
	methods: {
		...mapActions(['fetchList']),
		toPosts(id) {
			this.$router.push(`/posts/${id}`)
		}
	},
	created() {
		this.fetchList()
	}
}


</script>


<style>
.list {
	display: flex;
	flex-wrap: wrap;
}
</style>